<script lang="ts">
import {defineComponent, ref} from "vue"
import {getLogListApi, exportLogListApi} from "@/apps/admin/api/system/log";
import {useHttpPagingResult} from "@/hooks/http";
import {TableColumn} from "@/components/AppTable/TableType";
import {SYSTEM_OS} from "@/units/constant";

export default defineComponent({
  setup() {
    const _os = SYSTEM_OS.map(item => {
      return {label: item, value: item}
    })

    const where = ref({
      name: '',
      url: '',
      ip: '',
      time: [],
      os: ''
    })

    const exstate = ref(false)

    /**
     * hook获取数据
     */
    const {pagination, list, loading, getRequestData} = useHttpPagingResult(function (query) {
      return getLogListApi({...query, ...where.value});
    })

    /**
     * 导出操作日志
     */
    function exportLogList() {
      exstate.value = true
      exportLogListApi(where.value).then(result => {
        if (result.code === 200) {
          window.open(result.data.url)
        }
        exstate.value = false
      })
    }

    /**
     * 列表配置
     */
    const columns: Array<TableColumn> = [
      {label: "id", prop: "id", width: 100},
      {label: "行为", prop: "name", minWidth: 250},
      {label: "系统", prop: "os", minWidth: 120},
      {label: "浏览器", prop: "browser", minWidth: 120},
      {label: "IP", prop: "ip", minWidth: 150},
      {label: "IP属地", prop: "ascription", minWidth: 200},
      {label: "接口地址", prop: "url", showOverflowTooltip: true, minWidth: 300},
      {label: "状态", prop: "status", minWidth: 120},
      {label: "时间", prop: "time", type: "timestramp", width: 165},
    ]

    return {
      _os, pagination, exstate, list, columns, loading, where, getRequestData, exportLogList
    }
  }
})
</script>

<template>
  <div>
    <data-card>
      <search-form :disabled="loading" label-width="45px" @search="getRequestData({page:1,size:pagination.size})">
        <template #default>
          <el-form-item show label="行为">
            <el-input clearable v-model.trim="where.name" placeholder="操作行为"/>
          </el-form-item>
          <el-form-item label="接口">
            <el-input clearable v-model.trim="where.url" placeholder="接口地址"/>
          </el-form-item>
        </template>
        <template #more>
          <el-form-item label="IP地址">
            <el-input placeholder="Ipv4或Ipv6地址" v-model.trim="where.ip"></el-input>
          </el-form-item>
          <el-form-item label="操作时间">
            <date-range v-model="where.time"></date-range>
          </el-form-item>
          <el-form-item label="操作系统">
            <select-input clearable v-model="where.os" :data="_os"></select-input>
          </el-form-item>
        </template>
        <template #buttons>
          <el-button @click="exportLogList" :disabled="exstate" :loading="exstate" type="warning">
            {{ exstate ? '导出中' : '导出' }}
          </el-button>
        </template>
      </search-form>
    </data-card>

    <data-card title="操作记录" class="app-margin-top-interval">
      <template #default>
        <app-interval></app-interval>
        <app-table height="calc(var(--ach) - 217px)" :data="list" :columns :loading :pagination @reload="getRequestData">
          <template #status="{ row }">
            <el-text type="success" v-if="row.status">成功</el-text>
            <el-text type="danger" v-else>失败</el-text>
          </template>
        </app-table>
      </template>
    </data-card>
  </div>
</template>